<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#box{
				width:400px;
				height:400px;
				border:1px solid red;
				margin:100px;
				position:relative;
			}
			#box .opc{
				
				width:400px;
				height:400px;
				background: black;
				opacity: 0;
				filter:alpha(opacity:0);
				position:absolute;
				top:0px;
				left:0px;
				z-index: 100;
			}
			#box .cover{
				width:200px;
				height:200px;
				background: yellow;
				/*火狐谷歌*/
				opacity: 0.5;
				/*IE透明度设置方法*/
				filter:alpha(opacity:50);
				position:absolute;
				top:0;
				left:0;
				z-index: 1;
				display: none;
			}
			
			#hideBox{
				width:400px;
				height:400px;
				border:1px solid black;
				position:absolute;
				top:100px;
				left:550px;
				overflow: hidden;
				display: none;
			}
			#hideBox img{
				position:absolute;
				top:0px;
				left:0px;
			}
		</style>
		<script>
			window.onload = function(){
				var oBox = document.getElementById("box");
				var opc = oBox.children[0];
				var oCover = oBox.children[2];
				
				var hideBox = document.getElementById("hideBox");
				var hideImg = hideBox.children[0];
//				移入盒子的时候,让半透明黄块显示
				oBox.onmouseover = function(){
					oCover.style.display = 'block';
					hideBox.style.display = 'block';
				}
//				移出盒子的时候,让半透明黄块隐藏
				oBox.onmouseout = function(){
					oCover.style.display = 'none';
					hideBox.style.display = 'none';
				}
				opc.onmousemove = function(ev){
//					获取时间对象
					var ev = window.event || ev;
					var left = ev.clientX - oBox.offsetLeft - oCover.offsetWidth/2;
					var top = ev.clientY - oBox.offsetTop -oCover.offsetHeight/2;
					if(left<0){
						left = 0;
					}
					if(left>(oBox.offsetWidth-oCover.offsetWidth)){
						left = oBox.offsetWidth-oCover.offsetWidth;
					}
					
					if(top<0){
						top = 0;
					}
					if(top>(oBox.offsetHeight-oCover.offsetHeight)){
						top = oBox.offsetHeight-oCover.offsetHeight;
					}	
					oCover.style.left = left + 'px';
					oCover.style.top = top + 'px';
					
					
					//移动大图
					var scaleX = left/(oBox.offsetWidth-oCover.offsetWidth);
					var scaleY = top/(oBox.offsetHeight-oCover.offsetHeight);
					
					var imgLeft = scaleX * (800-400);
					var imgTop = scaleY * (800-400);
					
					hideImg.style.left = -imgLeft + 'px';
					hideImg.style.top = -imgTop + 'px';
					
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div class="opc"></div>
			<img src="./images/400.jpg" alt="" />
			<div class="cover"></div>
		</div>
		<div id="hideBox">
			<img src="./images/800.jpg" alt="" />
		</div>
	</body>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</html>
